<template>
  <div class="app">
    <div class="all_main" style="width: 1515px;margin: auto;background-color:#F7F7F7;height: 1350px ">
      <!--header-->
      <div class="header layout-header sam-A" style="height: 195px;width: 100%;background-color: white;border: 1px solid rgba(218,223,229,0.94) ">
        <!--img-->
        <div class="page-width">
          <div class="head-item-logo-area">
            <div class="hao123logo" id="indexLogo"  style="width:120px;">
              <a class="hao123logourl" style="width:120px;height:33px;">
              <img src="../assets/hao123_logo.png" width="120" height="33">
              </a>
            </div>
            <a class="new-set-home" data-httpslink="off" href="" >设为首页</a>
          </div>
          <div class="head-item-city-area">
            <div class="header-line">
              <div class="line-item"><span class="city-name">嘉兴</span>
                <div class="line-item city-change-btn" >切换</div>
              </div>
              <a class="line-item weather-week">七日天气</a><a class="line-item new-head-icon more-icon"></a></div>

          </div>
          <div class="head-item-weather-area">
            <div class="header-line"><a class="line-item weather-today">
              <i class="new-head-icon status-icon" style="background-image: url(https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/weather/v3/a1.png);">

              </i>今<span class="weather-status">阴</span>
              <div class="weather-tag-area">
                <div class="weather-info" style="top: 0px; opacity: 1;"><span class="weather-temp">8～15℃ </span><span
                  class="weather-air">重</span></div>
                <div class="weather-tag undefined" style="top: 100%; opacity: 1;">
                  <i class="new-head-icon warn-icon" style="background-image: url(https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/weather/yj/inull.png)">
                  </i>预警
                </div>
                <div class="weather-tag air-red-tag air-weather-tag" style="top: 100%; opacity: 1;">重度</div>
              </div>
            </a><a class="line-item weather-tomorrow">
              <i class="new-head-icon status-icon" style="background-image: url(https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/weather/v3/a0.png);">
            </i>明<span
              class="weather-status">晴</span>
              <div class="weather-tag-area">
                <div class="weather-info" style="top: 0px;"><span class="weather-temp">8～16℃</span></div>
              </div>
            </a></div>
          </div>
          <div class="head-item-calendar-area" >
            <div class="header-line">
              <a class="line-item calendar-item solar-date">12月22日</a>
              <a class="line-item calendar-item week-date">星期三</a>
            </div>
            <div class="header-line">
              <a class="line-item calendar-item lunar-date">冬月十九</a>
              <a class="line-item calendar-item lucky-date">星座运势</a>
            </div>
          </div>
          <div class="head-item-links-area" >
            <div class="header-line">
              <div class="link-item line-item ">
                <a>查IP</a>
              </div>
              <div class="link-item line-item">
                <a>邮箱</a>
              </div>
            </div>
            <div class="header-line">
              <div class="link-item line-item "><a>地图</a></div>
              <div class="link-item line-item"><a>汇率</a></div>
            </div>
            <div class="header-line">
              <div class="link-item line-item ">
                <a>火车票</a>
              </div>
              <div class="link-item line-item">
                <a>查快递</a>
              </div>
            </div>
            <div class="header-line">
              <div class="link-item line-item ">
                <a>kpl赛程</a>
              </div>
              <div class="link-item line-item">
                <a>股票行情</a>
              </div>
            </div>
            <div class="header-line">
              <div class="link-item line-item has-limit">
                <a target="_blank">违章查询</a>
              </div>
              <div class="link-item line-item">
                <a>彩票开奖</a>
              </div>
            </div>
            <div class="header-line">
              <div class="link-item line-item">
                <a href="" target="_blank">网盘</a>
              </div>
              <div class="link-item line-item">
                <a>翻译</a>
              </div>
            </div>
          </div>
          <div class="head-item-login-area header__item--login">
            <div id="login"  class="g-ib headlink2 login">
              <div class="login__state-logout header-line" data-hook="loginPanel"  >
                <a  class="line-item login__link login__user headlink2__link s-wea" href="#" v-if="token==null">
                  <span class="headlink2__text login__username" @click="LoginFormVisible = true">登录</span> |
                  <span class="headlink2__text login__username" @click="RegisterFormVisible = true">注册</span>
                </a>
                <a  class="line-item login__link login__user headlink2__link s-wea" href="#" v-else>
                  <span class="headlink2__text login__username" >欢迎{{token}}</span> |
                  <span class="headlink2__text login__username" @click="exit()">退出</span>
                </a>
              </div>
            </div>
          </div>
        </div>

        <!--登录页面-->
        <el-dialog title="登录界面" :visible.sync="LoginFormVisible" width="30%" center>
          <el-form :model="User" status-icon :rules="rules" ref="ruleForm" >
            <el-form-item label="用户账号：" prop="username" :label-width="formLabelWidth">
              <el-input style="width: 300px" v-model="User.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户密码："prop="password" :label-width="formLabelWidth">
              <el-input style="width: 300px" type="password" v-model="User.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="margin-left: 50px">
            <el-button style="width: 100px" @click="LoginFormVisible = false">取 消</el-button>
            <el-button style="width: 100px" type="primary" @click="submitForm('ruleForm')">登 录</el-button>
          </div>
        </el-dialog>

        <!--注册页面-->
        <el-dialog title="注册界面" :visible.sync="RegisterFormVisible" width="30%" center>
          <el-form :model="People" status-icon :rules="rules" ref="ruleForm1" >
            <el-form-item label="输入账号：" prop="username" :label-width="formLabelWidth">
              <el-input style="width: 300px" v-model="People.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="输入密码：" prop="password" :label-width="formLabelWidth">
              <el-input type="password" style="width: 300px" v-model="People.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="margin-left: 50px">
            <el-button style="width: 100px" @click="RegisterFormVisible = false">取 消</el-button>
            <el-button style="width: 100px" type="primary" @click="RegisterForm('ruleForm1')">注 册</el-button>
          </div>
        </el-dialog>

        <!--button搜索-->
        <div class="show" style="width: 800px;height: 100px;">
          <div style="float: left;margin-top: 20px;margin-right: 5px">
            <img src="../assets/baidu_logo.png" style="width:130px;height:40px" alt="">
          </div>
          <div class="input" style="float: left;margin-top: 25px">
            <el-input style="width: 500px" v-model="mix" placeholder="请输入内容"></el-input>
          </div>

          <div class="button" style="float: left;margin-top: 25px;">
            <el-button style="width: 115px;" type="primary" @click="toSelect()">百度一下</el-button>
          </div>
        </div>
      </div >
      <!--left资讯-->
      <div class="left_content" style="margin-left: 162px;height: 1000px;width: 280px;background-color: #F7F7F7;float: left;margin-top: 10px">
        <!--top-->
        <div style="width: 280px;height: 490px;background-color: white;border: 1px solid rgba(218,223,229,0.94);">
          <div style="height: 30px;padding-top: 10px;border: 1px solid rgba(218,223,229,0.94);">
            <span class="span_item" style="color: green">头条</span>
            <span class="span_item">社会</span>
            <span class="span_item">文娱</span>
            <span class="span_item">生活</span>
            <span class="span_item">运动</span>
          </div>
          <div class="lun">
            <el-carousel  height="150px">
              <el-carousel-item v-for="item in imgUrl" :key="item">
                <img style="width: 278px;height: 148px" :src="item" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="content_list topzixun" >
            <div class="rec-hotsearch" style="padding-left: 10px;width: 270px;height: 290px">
              <a title="从六中全会公报看世界第一大党" > 从六中全会公报看世界第一大党</a>
              <a title="31省区市新增本土确诊38例" > 31省区市新增本土确诊38例</a>
              <a title="六中全会重磅决议释放哪些重要信息"> 六中全会重磅决议释放哪些重要信息</a>
              <a href="" title="全球多国房价达10年最大涨幅"> 全球多国房价达10年最大涨幅</a>
              <a href="" title="缉毒民警牺牲 公安部副部长表态"> 缉毒民警牺牲 公安部副部长表态</a>
              <a href="" title="山西寿阳发生火灾致8死5伤"> 山西寿阳发生火灾致8死5伤</a>
              <a href="" title="阿里巴巴调整 蒋凡调任海外业务"> 阿里巴巴调整 蒋凡调任海外业务</a>
              <a href="" title="阿里巴巴调整 蒋凡调任海外业务"> 阿里巴巴调整 蒋凡调任海外业务</a>
              <a href="" title="阿里巴巴调整 蒋凡调任海外业务"> 阿里巴巴调整 蒋凡调任海外业务</a>
            </div>
          </div>
        </div>
        <!--bot视频-->
        <div style="width: 280px;height: 497px;margin-top: 10px;background-color: white;border: 1px solid rgba(218,223,229,0.94);">
          <div style="width: 280px;height: 30px;padding-top: 10px;border: 1px solid rgba(218,223,229,0.94);">
            <span style="margin-left: 90px;font-size: 20px;color: black;">热点榜单</span>
          </div>
          <div class="hotsearch-box-content">
            <ul class="hotsearch-box-list">
              <li style="height: 40px">
                <a>
                  <span class="top-num">1</span>
                  <span class="keyword" title="学习六中全会精神 这些表述要精读">学习六中全会精神 这些表述要精读</span>
                  <span class="hot-icon icon-3"></span>
                  <span class="search-num">491万</span></a>
              </li>
              <li >
                <a>
                  <span class="top-num">2</span>
                  <span class="keyword" title="孙卓养母发声:嫌犯说孙卓是弃养的">孙卓养母发声:嫌犯说孙卓是弃养的</span>
                  <span class="hot-icon icon-3"></span>
                  <span class="search-num">487万</span>
                </a>
              </li>
              <li>
                <a>
                  <span class="top-num">3</span>
                  <span class="keyword" title="“00后”这样学习六中全会精神">“00后”这样学习六中全会精神</span>
                  <span class="hot-icon icon-3"></span>
                  <span class="search-num">474万</span>
                </a>
              </li>
              <li >
                <a>
                  <span class="top-num">4</span>
                  <span class="keyword" title="印度国防参谋长在坠机事故中身亡">印度国防参谋长在坠机事故中身亡</span>
                  <span class="hot-icon icon-3"></span>
                  <span class="search-num">461万</span>
                </a>
              </li>
              <li ><a>
              <span
                class="top-num">5</span><span class="keyword" title="孙卓:如果养父母被判刑我会生气">孙卓:如果养父母被判刑我会生气</span><span
                class="hot-icon icon-0"></span><span class="search-num">452万</span></a></li>
              <li ><a><span
                class="top-num">6</span><span class="keyword" title="男子和孙海洋手机撞号6年不敢换号">男子和孙海洋手机撞号6年不敢换号</span><span
                class="hot-icon icon-0"></span><span class="search-num">447万</span></a></li>
              <li ><a><span
                class="top-num">7</span><span class="keyword" title="辽宁锦州对主动核检阳性人员奖2万">辽宁锦州对主动核检阳性人员奖2万</span><span
                class="hot-icon icon-0"></span><span class="search-num">431万</span></a></li>
              <li ><a><span
                class="top-num">8</span><span class="keyword" title="“抢甘蔗事件”老人:不原谅他们">“抢甘蔗事件”老人:不原谅他们</span><span
                class="hot-icon icon-0"></span><span class="search-num">426万</span></a></li>
              <li ><a><span
                class="top-num">9</span><span class="keyword" title="朔尔茨正式当选德国总理">朔尔茨正式当选德国总理</span><span
                class="hot-icon icon-0"></span><span class="search-num">412万</span></a></li>
              <li ><a><span
                class="top-num">10</span><span class="keyword" title="孙卓养父母曾称孙卓是打工时生的">孙卓养父母曾称孙卓是打工时生的</span><span
                class="hot-icon icon-1"></span><span class="search-num">408万</span></a></li>
            </ul>
          </div>
        </div>
      </div>
      <!--right-->
      <div class="right_main" style=" margin-right: 162px;height: 1100px;width: 900px;background-color: white;margin-top: 10px;float: right;border: 1px solid rgba(218,223,229,0.94)">
          <div class="" style=" width: 880px;height:1050px;margin-top: 10px;margin-left: 10px">
            <div class="main" style="height: 30px;">
              <span   style="font-size: 15px;margin-left: 250px"><router-link class="is" :to="{name:'First'}"><a href="">首页</a></router-link></span>
              <span style="font-size: 15px;margin-left: 50px" @click="toRecreation()"><a class="is" >娱乐</a></span>
              <span style="font-size: 15px;margin-left: 50px" @click="toGame()"><a class="is" >游戏</a></span>
              <span style="font-size: 15px;margin-left: 50px" @click="toSport()"><a class="is" >体育</a></span>
              <span style="font-size: 15px;margin-left: 50px" @click="toCar()"><a class="is" >汽车</a></span>
<!--              <span style="font-size: 15px;margin-left: 50px" @click="toVideo()"><a class="is" >视频</a></span>-->
            </div>
            <router-view/>
          </div>
      </div>
      <!--footer-->
      <div class="footer">
        <div class="hao123-footer" >
          <div class="g-fl"><a class="item g-fc3 g-fc23h" href="">关于本站</a><a
            class="item g-fc3 g-fc23h" href="">服务协议</a><a
            class="item g-fc3 g-fc23h" href="">常见问题</a><a
            class="item g-fc3 g-fc23h" href="">全站地图</a><a class="item g-fc3 g-fc23h">意见反馈</a><a
            class="item g-fc3 g-fc23h mr12 tuiguang" href="">百度推广</a><a
            class="item g-fc3 g-fc23h mr12 beian"
            href="">京公网安备 11000002000001号</a><a
            href="" class="item g-fc3 g-fc3 item-text">京ICP证030173号</a><span
            class="item g-fc3 g-fc23h report">违法和不良信息举报电话：400-921-6911</span><a
            class="item g-fc3 g-fc23h mr12 width-nr-hide bottom-fawu " href=""
            title="中国互联网违法和不良信息举报中心"><i class="icon icon1"></i></a><a
            class="item g-fc3 g-fc23h mr12 width-nr-hide bottom-fawu icon-fawu2" href=""
            title="北京市公安局网络违法犯罪举报网站"><i class="icon icon2"></i></a><a
            class="item g-fc3 g-fc23h width-nr-hide bottom-fawu icon-fawu3" href=""
            title="北京市互联网违法和不良信息举报中心"><i class="icon icon3"></i></a></div>
          <div class="g-fr"><a class="item g-fc3 g-fc23h mr0 mobile width-nr-hide" href=""><i
            class="icon"></i>下载手机端</a></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Index",
      data() {
        return {
          token:'',
          User: {},
          People:{},
          mix:'',
          currentPage:1, //初始页
          pageSize:5,    //每页的数据
          Inform:{},//查询的单个存储
          tableData: [{}],
          LoginFormVisible: false,//登录页面
          RegisterFormVisible: false,//修改页面
          formLabelWidth: '100px',
          imgUrl: [
            require('../assets/lun/lun1.jpg'), require('../assets/lun/lun2.jpg'), require('../assets/lun/lun3.jpg')
          ],
          rules:{
            username:[
              { required: true, message: '请输入账号名称', trigger: 'blur' },
              { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
            ]
          }
        }
      },
      methods:{
        /*退出*/
        exit(){
          localStorage.removeItem("username")
          location. reload()
        },
        /*token*/
        findToken(){
          this.token = localStorage.getItem("username")
        },
        /*登录*/
        submitForm(formName) {
          this.$refs[formName].validate(async  (valid) => {
            if (valid) {
              if(!this.User.username){alert('请输入账号');return false}
              if(!this.User.password){alert('请输入密码');return false}
              let _this = this
              this.$axios.post("http://localhost:8060/user/login",this.User).then(function (res) {
                //清空本次保存数据
                if(res.data!=-1){
                  localStorage.setItem("username",_this.User.username)
                  _this.$options.methods.findToken();
                  alert("登录成功！")
                  _this.User = {};
                  _this.LoginFormVisible =false
                  location. reload()
                }else {
                  alert("账号或密码错误！");
                  _this.User = {};
                }
              }).catch(function (err) {
                localStorage.removeItem('username')
                alert("登陆失败！");
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        /*注册*/
        RegisterForm(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              if(!this.People.username){alert('请输入用户名称');return false}
              if(!this.People.password){alert('请输入用户密码');return false}
              console.log(this.People)
              let _this = this
              this.$axios.post("http://localhost:8060/user/setUser",this.People).then(function () {
                //清空本次保存数据
                alert("注册成功！请重新登录！")
                _this.People = {};
                location. reload()
              }).catch(function (err) {
                // alert("用户信息添加失败，请稍后再试")
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },

        toSelect(){
          this.$router.push({ name: 'Select', params: { title: this.mix }});
        },

        /*前往娱乐板块*/
        toRecreation(){
          this.$router.push({ name: 'Recreation', params: { Id: 2 }});
        },
        toGame(){
          this.$router.push({ name: 'Game', params: { Id: 3 }});
        },
        toSport(){
          this.$router.push({ name: 'Sport', params: { Id: 4 }});
        },
        toCar(){
          this.$router.push({ name: 'Car', params: { Id: 5 }});
        },
        toVideo(){
          this.$router.push({ name: 'Video'});
        }
      },
       created() {
        this.findToken();
       }
    }
</script>

<style scoped>
  .main a:hover{
    color: red;
  }
  .topzixun .rec-hotsearch {
    /*background: #fff;*/
    margin-top: 10px;

  }
  .topzixun .rec-hotsearch a {
    width: 280px;
    height: 40px;
    line-height: 30px;
    overflow: hidden;
    white-space: nowrap;

  }
  .span_item{
    font-size: 16px;
    font-weight: bold;
    margin-left: 15px;
    padding-top: 10px;
  }
  .span_item:hover{
    color: green;
  }

  .hotsearch-box-list {
    font-size: 14px;
    color: #000;
    padding: 0px 0px;
  }

  ol, ul, dl {
    list-style: none;
  }

  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }

  a {
    text-decoration: none;
    cursor: pointer;
    color: #333;
  }

  .hotsearch-box-list a:hover .keyword {
    color: #f50;
    text-decoration: underline;
  }

  .hotsearch-box-list a {
    display: block;
  }

  .hotsearch-box-list li:first-child .top-num {
    color: #F54545;
  }

  .hotsearch-box-list .top-num {
    font-size: 14px;
  }

  .hotsearch-box-list span {
    display: inline-block;
    vertical-align: top;
    height: 29px;
    line-height: 29px;
    max-width: 212px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hotsearch-box-list span {
    display: inline-block;
    vertical-align: top;
    height: 29px;
    line-height: 29px;
    max-width: 212px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hotsearch-box-list .search-num {
    float: right;
    font-size: 12px;
    color: #BBB;
  }

  .icon-3 {
    background-color: #FF9812;
  }

  .hotsearch-box-list li {
    padding: 0 5px 0 10px;
    position: relative;
    line-height: 40px;
  }

  ul {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .hao123-footer {
    width: 1190px;
    height: 40px;
    margin: 0 auto;
  }

  .hao123-footer .item {
    margin-right: 20px;
    height: 40px;
    font: 400 12px/40px "Microsoft YaHei";
    float: left;
    color: #9195A3;
  }

  .hao123-footer .bottom-fawu {
    margin-right: 16px;
  }

  .footer {
    position: fixed;
    width: 100%;
    height: 40px;
    bottom: 0;
    z-index: 201;
    background: #f7f7f7;
    clear: both;
  }

  .layout-header .page-width {
    margin: 0 auto;
    width: 1190px;
    height: 80px;
    box-sizing: border-box;
    padding-top: 27px;
    font-size: 12px;
    line-height: 1;
    color: #333;
  }

  .layout-header .page-width .head-item-logo-area {
    display: inline-block;
    vertical-align: middle;
    height: 34px;
    width: 201px;
    margin-right: 30px;
    margin-top: -7px;
  }

  .layout-header .page-width .head-item-logo-area .hao123logo {
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-right: 12px;
  }

  a {
    text-decoration: none;
    cursor: pointer;
    color: #333;
  }

  a {
    background-color: transparent;
  }

  .layout-header .page-width .head-item-logo-area .new-set-home {
    display: inline-block;
    vertical-align: top;
    position: relative;
    height: 17px;
    width: 58px;
    border-radius: 10px;
    border: 1px solid #D1D8E5;
    color: #626675;
    line-height: 17px;
    text-align: center;
    margin-top: -2px;
  }

  a {
    text-decoration: none;
    cursor: pointer;
  }

  img {
    border-style: none;
  }

  img, input, label, button {
    vertical-align: middle;
  }

  img {
    border: 0;
  }

  .layout-header .page-width .head-item-city-area {
    min-width: 60px;
    margin-right: 37px;
    position: relative;
  }

  .layout-header .page-width .head-item-calendar-area, .layout-header .page-width .head-item-city-area, .layout-header .page-width .head-item-links-area, .layout-header .page-width .head-item-login-area, .layout-header .page-width .head-item-weather-area {
    display: inline-block;
    vertical-align: middle;
    box-sizing: content-box;
    padding: 5px 8px;
    margin-top: -5px;
    border-radius: 6px;
  }

  .layout-header .page-width .header-line:first-child {
    margin-left: 0;
  }

  .layout-header .page-width .header-line {
    display: inline-block;
    vertical-align: middle;
  }

  .layout-header .page-width .header-line .line-item {
    height: 19px;
    line-height: 18px;
    cursor: pointer;
  }

  .layout-header .page-width .head-item-city-area .city-name {
    cursor: default;
  }

  .layout-header .page-width .head-item-city-area .city-change-btn {
    color: #626675;
    display: inline-block;
    margin-left: 8px;
  }

  .layout-header .page-width .header-line .line-item {
    height: 19px;
    line-height: 18px;
    cursor: pointer;
  }

  .layout-header .page-width .header-line .line-item {
    height: 19px;
    line-height: 18px;
    cursor: pointer;
  }

  .layout-header .page-width .head-item-city-area .more-icon {
    margin: 0;
    margin-left: 8px;
    background-image: url(https://sc0.hao123img.com/res/header/20210122/left_arrow.png);
  }

  .layout-header .page-width .head-item-weather-area {
    min-width: 123px;
    margin-right: 22px;
  }

  .layout-header .page-width .header-line:first-child {
    margin-left: 0;
  }

  .layout-header .page-width .header-line {
    display: inline-block;
    vertical-align: middle;
  }

  .layout-header .page-width .header-line .line-item {
    height: 19px;
    line-height: 18px;
    cursor: pointer;
  }

  .layout-header .page-width .new-head-icon {
    display: inline-block;
    vertical-align: top;
    height: 14px;
    width: 14px;
    background-position: center;
    background-size: contain;
    margin: 2px 3px 0 0;
  }

  .layout-header .page-width .header-line .line-item {
    height: 19px;
    line-height: 18px;
    cursor: pointer;
  }

  .layout-header .page-width .head-item-weather-area .weather-tag-area {
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
    line-height: 21px;
    min-width: 74px;
    height: 18px;
    overflow: hidden;
    position: relative;
  }

  element.style {
    background-image: url(https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/weather/v3/a0.png);
  }

  .layout-header .page-width .new-head-icon {
    display: inline-block;
    vertical-align: top;
    height: 14px;
    width: 14px;
    background-position: center;
    background-size: contain;
    margin: 2px 3px 0 0;
  }

  .layout-header .page-width .header-line .line-item {
    height: 19px;
    line-height: 18px;
    cursor: pointer;
  }

  .layout-header .page-width .head-item-weather-area .weather-tag-area {
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
    line-height: 21px;
    min-width: 74px;
    height: 18px;
    overflow: hidden;
    position: relative;
  }

  .layout-header .page-width .head-item-calendar-area {
    min-width: 90px;
    margin-right: 66px;
  }

  .layout-header .page-width .header-line:first-child {
    margin-left: 0;
  }

  .layout-header .page-width .head-item-calendar-area .calendar-item {
    display: block;
  }

  .layout-header .page-width .header-line .line-item {
    height: 19px;
    line-height: 18px;
    cursor: pointer;
  }

  .layout-header .page-width .head-item-calendar-area .calendar-item {
    display: block;
  }

  .layout-header .page-width .header-line .line-item {
    height: 19px;
    line-height: 18px;
    cursor: pointer;
  }

  #link {
    width: 750px;
    border: 2px solid #9ED5FF;
    top: 100px;
    left: 100px;
    font-size: 2px;
  }

  li {
    display: inline-block;
    text-align: center;
  }

  .show {
    margin: 10px auto;
    width: 340px;
  }

  #text {
    /*去掉默认样式*/
    appearance: none;
    width: 250px;
    height: 20px;
    outline: 0;
  }

  #go {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    line-height: 25px;
    border: 0;
    width: 70px;
    height: 25px;
    font-size: 14px;
    color: white;
    background-color: rgb(33, 134, 250);
  }

  .search {
    width: 252px;
    border: 1px solid #ccc;
    display: none;
  }

  ul {
    list-style: none;
  }

  li {
    line-height: 20px;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 5px;
  }

  li:hover {
    background-color: rgb(230, 230, 230);
  }
</style>
